<?xml version="1.0"?>

<f:view xmlns="http://www.w3.org/1999/xhtml"
	xmlns:c="http://java.sun.com/jsp/jstl/core"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui"
	xmlns:ui="http://java.sun.com/jsf/facelets">
	<h:head />
	<h:body>
		<h:outputText value="#{msg.registroUsuarios}" />
		<p:separator />
		<h:outputText value="#{msg.visorUsuarios}" />
		<p:separator />
		<h:form id="form">
			<!-- Polling instead of pushing -->
			<p:poll interval="3" listener="#{beanRegistro.pooling}"
				update=":form:table :form:growl" />

			<p:growl id="growl" />
			<p:dataTable id="table" value="#{beanRegistro.listaClientes}"
				var="item" rowKey="#{item.idCliente}" paginator="true"
				paginatorPosition="bottom" rows="10"
				emptyMessage="¡No hay nuevos clientes!">
				<p:column id="noCel" headerText="#{msg.noCel}"
					style="font-size:small;" filterBy="#{item.noCel }"
					sortBy="#{item.noCel}">
					<h:outputText value="#{item.noCel}" />
				</p:column>
				<p:column id="estatusCte" headerText="#{msg.estatus}"
					style="font-size:small;" sortBy="#{item.estatusRegistro}"
					filterBy="#{item.estatusRegistro }">
					<h:outputText value="#{item.estatusRegistro}" />
				</p:column>
				<p:column id="tipoCte" headerText="#{msg.tipoCliente}"
					style="font-size:small;" sortBy="#{item.tipoClienteString}"
					filterBy="#{item.tipoClienteString }">
					<h:outputText value="#{item.tipoClienteString}" />
				</p:column>
				<p:column id="fechaServicio" headerText="#{msg.fechaUsoServicio}"
					style="font-size:small;" sortBy="#{item.fecha}"
					filterBy="#{item.fecha }">
					<h:outputText value="#{item.fecha}" />
				</p:column>
				<p:column id="fechaLlamada" headerText="#{msg.fechaLlamada}"
					style="font-size:small;" sortBy="#{item.fechaUltimaLlamadaString}"
					filterBy="#{item.fechaUltimaLlamadaString }">
					<h:outputText value="#{item.fechaUltimaLlamadaString}" />
				</p:column>
				<p:column id="prioridad" headerText="#{msg.prioridad}" style="font-size:small;" sortBy="#{item.llamadas}" >
					<p:graphicImage value="/resources/images/flag_blue.ico" rendered="#{item.prioridad1}" />
					<p:graphicImage value="/resources/images/flag_yellow.ico" rendered="#{item.prioridad2}"/>
					<p:graphicImage value="/resources/images/flag_red.ico" rendered="#{item.prioridad3}"/>
				</p:column>
				<p:column id="registro" headerText="Acciones"
					style="font-size:small;">
					<p:commandButton id="registroBtn" value="#{msg.registrar}"
						update=":form2:gridRegistro" icon="ui-icon-plusthick"
						disabled="#{!item.enabled}"
						action="#{beanRegistro.preRegistrarCliente}">
						<f:setPropertyActionListener value="#{item}"
							target="#{beanRegistro.itemSelected}" />
					</p:commandButton>
					<p:commandButton id="verDetalleBtn" icon="ui-icon-search"
						action="#{beanRegistro.verDetalle}" update=":form3:gridDetalle">
						<f:setPropertyActionListener value="#{item}"
							target="#{beanRegistro.itemSelected}" />
					</p:commandButton>
				</p:column>
			</p:dataTable>
		</h:form>
		<h:form id="form2">
			<p:dialog showEffect="fade" widgetVar="registroDialog" modal="true"
				closable="false" header="#{msg.nuevoCte}" style="font-size:small;">
				<p:panel header="#{msg.cliente}">
					<h:panelGrid columns="2" id="gridRegistro"
						styleClass="my-panel-grid">
						<h:outputText value="#{msg.noCel}" style="font-size:small;" />
						<h:outputText value="#{beanRegistro.itemSelected.noCel}"
							style="font-size:medium; font-weight:bold;" />
						<h:outputText value="#{msg.fechaUsoServicio}"
							style="font-size:small;" />
						<h:outputText value="#{beanRegistro.itemSelected.fecha}"
							style="font-size:small; font-weight:bold;" />
						<h:outputText value="#{msg.sexo} *" />
						<h:panelGroup>
							<p:selectOneRadio value="#{beanRegistro.input_idSexo}"
								id="options"
								style=" border-spacing: 2px; border-collapse: separate;">
								<f:selectItem itemLabel="#{msg.mujer}" itemValue="1" />
								<f:selectItem itemLabel="#{msg.hombre}" itemValue="2" />
							</p:selectOneRadio>
						</h:panelGroup>
						<h:outputText value="#{msg.nombre} *" />
						<h:panelGroup>
							<p:inputText value="#{beanRegistro.input_nombre}"
								id="input_Nombre" />
						</h:panelGroup>
						<h:outputText value="#{msg.apellidoP} *" />
						<h:panelGroup>
							<p:inputText value="#{beanRegistro.input_apellidoP}"
								id="input_ApellidoP" />
						</h:panelGroup>
						<h:outputText value="#{msg.apellidoM}" />
						<p:inputText value="#{beanRegistro.input_apellidoM}" />
						<h:outputText value="#{msg.tipoIdentificacion}" />
						<h:panelGroup>
							<p:selectOneMenu style="width:100%"
								value="#{beanRegistro.input_tipoIdentificacion}">
								<f:selectItem itemLabel="#{msg.selecciona}" itemValue="0"
									noSelectionOption="true" />
								<f:selectItem itemLabel="IFE" itemValue="1" />
								<f:selectItem itemLabel="Cartilla M." itemValue="2" />
								<f:selectItem itemLabel="Cedula Prof." itemValue="3" />
								<f:selectItem itemLabel="Pasaporte" itemValue="4" />
							</p:selectOneMenu>
						</h:panelGroup>
						<h:outputText value="#{msg.identificacion}" />
						<p:inputText value="#{beanRegistro.input_identificacion}" />
						<h:outputText value="#{msg.fechaNacimiento} *" />
						<h:panelGroup>
							<p:calendar value="#{beanRegistro.input_fechaNac}"
								navigator="true" pattern="dd-MM-yyyy" id="input_FechaNac" />
						</h:panelGroup>
						<h:outputText value="#{msg.calleyNo} *" />
						<h:panelGroup>
							<p:inputText value="#{beanRegistro.input_calleNo}" />
						</h:panelGroup>
						<h:outputText value="#{msg.colonia} *" />
						<h:panelGroup>
							<p:autoComplete value="#{beanRegistro.input_colonia}"
								id="input_Colonia" minQueryLength="5"
								completeMethod="#{beanRegistro.complete}" />
						</h:panelGroup>
						<h:outputText value="#{msg.cp} *" />
						<h:panelGroup>
							<p:inputText value="#{beanRegistro.input_cp}" id="input_CP" />
						</h:panelGroup>
						<h:outputText value="#{msg.comentarios}" />
						<p:inputTextarea value="#{beanRegistro.input_comentarios}" />
						<h:panelGroup>
							<h:outputText value="#{msg.aceptarTerminos}"
								style="font-size:8px;" title="#{msg.terminosCondiciones}" />
							<p:spacer height="0" width="55" />
						</h:panelGroup>
						<p:selectBooleanCheckbox style="float:right"
							value="#{beanRegistro.input_aceptarTerminos}" />
					</h:panelGrid>
					<h:panelGrid columns="4" style="align:right">
						<p:commandButton value="#{msg.llamarDespues}" icon="ui-icon-clock"
							actionListener="#{beanRegistro.llamarDespues}"
							oncomplete="registroDialog.hide()"
							update=":form:table :form:growl" immediate="true" />
						<p:commandButton value="#{msg.bajaTemporal}" icon="ui-icon-alert"
							actionListener="#{beanRegistro.bajaTemporal}"
							oncomplete="registroDialog.hide()"
							update=":form:table :form:growl" immediate="true" />
						<p:spacer height="0" width="20" />
						<p:commandButton value="#{msg.guardar}" icon="ui-icon-disk"
							actionListener="#{beanRegistro.saveCliente}"
							update=":form:table :form:growl" />
					</h:panelGrid>
				</p:panel>
			</p:dialog>
		</h:form>
		<h:form id="form3">
			<p:dialog showEffect="fade" widgetVar="detalleDialog" modal="true"
				header="#{msg.detalle}" style="font-size:small;">
				<h:panelGrid id="gridDetalle" columns="2" cellspacing="5">
					<h:outputText value="#{msg.noLlamadas}" />
					<h:outputText value="#{beanRegistro.itemSelected.llamadas}" style="font-weight:bold;" />
				</h:panelGrid>
			</p:dialog>
		</h:form>
	</h:body>
</f:view>
